<template>
  <!---搜索表单-->
    <div class="search-div">
        <el-form label-width="70px" size="small">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="学年">
                        <el-select v-model="queryDto.academicYear" placeholder="请选择" style="width: 100%">
                            <el-option v-for="(label,value) in academicYears" :key="label" :label="label"
                                       :value="value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="学期">
                        <el-select v-model="queryDto.semester" placeholder="请选择" style="width: 100%">
                            <el-option v-for="(label,value) in semesterOptions" :key="label" :label="label"
                                       :value="value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="display:flex">
                <el-button type="primary" size="small" @click="searchScore"> 搜索</el-button>
                <el-button size="small" @click="resetData">重置</el-button>
            </el-row>
        </el-form>
    </div>

  <!---数据表格-->
    <el-table :data="list" style="width: 100%" border>
        <el-table-column type="index" label="序号" width="60px" align="center"/>
        <el-table-column prop="academicYear" #default="scope" label="学年" min-width="100px">
            {{ academicYears[scope.row.academicYear] }}
        </el-table-column>
        <el-table-column prop="semester" #default="scope" label="学期" min-width="100px" align="center">
            {{ semesterOptions[scope.row.semester] }}
        </el-table-column>
        <el-table-column prop="code" label="课程代码" width="100px"/>
        <el-table-column prop="courseName" label="课程名称" width="180px"/>
        <el-table-column prop="credits" label="学分" width="60px"/>
        <el-table-column prop="grade" label="成绩" width="70px"/>
        <el-table-column prop="natureName" label="成绩性质" width="160px"/>
        <el-table-column prop="isDegree" label="是否学位课程" #default="scope" width="110px" align="center">
            <p v-if="scope.row.isDegree === 1">是</p>
            <p v-else>否</p>
        </el-table-column>
        <el-table-column prop="collegeName" label="开课学院" width="160px"/>
        <el-table-column prop="categoryName" label="课程类别" width="160px"/>
        <el-table-column prop="ownershipName" label="课程归属" width="160px"/>
        <el-table-column prop="teachingClassName" label="教学班" width="160px"/>
        <el-table-column prop="teacherName" label="任课老师" width="120px"/>
        <el-table-column prop="assessmentMethod" label="考核方式" #default="scope" width="100px">
            <p v-if="scope.row.assessmentMethod === 0">考试</p>
            <p v-else-if="scope.row.assessmentMethod === 1">考查</p>
        </el-table-column>
        <el-table-column prop="studentNumber" label="学号" width="160px"/>
        <el-table-column prop="studentName" label="姓名" width="160px"/>
    </el-table>
    <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
                   :page-sizes="[5, 10, 20, 50, 100]" @size-change="fetchData" @current-change="fetchData"
                   layout="total, sizes, prev, pager, next" :total="total"/>
</template>

<!-- script部分修改内容 -->
<script setup>
import {onMounted, ref} from 'vue'
import {GetOwnerScoreListByPage} from "@/api/grade";
import {useAccount} from "@/pinia/modules/account";

const userInfo = useAccount().userinfo;
const academicYears = {
    2024: "2024-2025",
    2023: "2023-2024",
    2022: "2022-2023",
    2021: "2021-2022",
    2020: "2020-2021",
    2019: "2019-2020"
};
const semesterOptions = {
    1: '秋季学期',
    2: '春季学期'
};
// 分页条总记录数
let total = ref(0)
// 定义表格数据模型
let list = ref([])
//分页数据
const pageParamsForm = {
    page: 1, // 页码
    limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm) // 将pageParamsForm包装成支持响应式的对象
// 搜索表单数据
const queryDto = ref({
    academicYear: '',
    semester: '',
    studentNumber: userInfo.username
})
// 页面加载完毕以后请求后端接口获取数据
onMounted(async () => {
    await fetchData()
})
// 搜索按钮点击事件处理函数
const searchScore = () => {
    fetchData()
}
// 重置按钮点击事件处理函数
const resetData = () => {
    queryDto.value = {
        academicYear: '',
        semester: '',
        studentNumber: userInfo.username
    }
    fetchData()
}
// 远程调用后端分页查询接口
const fetchData = async () => {
    const {data} = await GetOwnerScoreListByPage(
        pageParams.value.page,
        pageParams.value.limit,
        queryDto.value
    )
    list.value = data.list
    total.value = data.total
}
</script>

<style scoped>
.search-div {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
}
</style>
